<script setup>
import {nextTick, onBeforeMount, reactive, ref} from "vue";
import routers from "../../router/index.js"
import { useRouter } from 'vue-router'
let menuList = ref();
const router = useRouter()
let showMainPage=ref(true)


function toPage(name){
  let toPath = getToPath(name);
  router.push({path:toPath});

}

/**
 * 跳转路由
 * @param name 跳转路由name
 * @returns {*}
 */
function getToPath(name){
  let toPath;
  menuList.find(menu => {
    if(menu.children!=null){
      menu.children.find(children => {
        if(children.name===name){
          toPath=children.path
        }
      })
    }
  })
  return toPath;
}

/**
 * 返回上一级
 */
function back(){
  router.back();
}
/**
 * 返回上一级
 */
function flush(){
  showMainPage.value=false;
  nextTick(()=>{
    showMainPage.value=true;
  })
}

onBeforeMount(() => {
  menuList = routers.options.routes;
})

</script>

<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh', minWidth: '100vm'}">
      <Sider :collapsible=false :collapsed-width="60">
        <Menu @on-select="toPage"  class="menu-item" :width="'195'" theme="dark">
          <template v-for="menu in menuList">
            <Submenu v-if="menu.show===true" :name="menu.name">
              <template #title>
                <Icon :type="menu.icon"/>
                {{ menu.name }}
              </template>
              <MenuItem   :name="children.name" v-if="menu.children.length >0"
                        v-for="children in menu.children">{{ children.name }}
              </MenuItem>
            </Submenu>
          </template>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)', padding: '0'}">
          <Space>
            <Button type="info" @click="back" class="background-back-button">返回</Button>
            <Button type="primary" @click="flush" class="background-back-button-flush">刷新</Button>
          </Space>
        </Header>
        <Card class="mainCard" >
          <router-view v-if="showMainPage"></router-view>
        </Card>
      </Layout>
    </Layout>
  </div>
</template>

<style scoped>
.layout {
  height: 100%;
  width: 100%;
}

.menu-item {
  height: 100%;
}

.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width .2s ease .2s;
}

.menu-item i {
  transform: translateX(0px);
  transition: font-size .2s ease, transform .2s ease;
  vertical-align: middle;
  font-size: 16px;
}

.collapsed-menu span {
  width: 0px;
  transition: width .2s ease;
}

.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size .2s ease .2s, transform .2s ease .2s;
  vertical-align: middle;
  font-size: 22px;
}

.dev-run-preview .dev-run-preview-edit {
  display: none
}
.mainCard{
  height: 100%;
  margin: 1px 1px 1px 1px;
}
.background-back-button{
  margin-left: 15px;
  align-items: center;
}
.background-back-button-flush{
  align-items: center;
}
</style>